<template>
  <div class="container">
    <div class="top">机器人管理</div>
    <div class="header">
      <el-form :model="queryParams" label-width="100px" class="demo-ruleForm">
        <el-form-item label="机器人编号：" prop="robotNo">
          <el-input placeholder="请输入机器人编号" v-model="queryParams.robotNo"></el-input>
        </el-form-item>
        <el-form-item label="机器人名称：" prop="robotName">
          <el-input placeholder="请输入机器人名称" v-model="queryParams.robotName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="
                          background: linear-gradient(0deg, #123150, #1C97B1);
                          border-radius: 2px;
                          border: 1px solid #1560AC;
                          color: #fff;
                          width:80px; 
                          height: 37px;
                          margin: 22px 0 0 -60px" @click="onSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="
                          background: linear-gradient(0deg, #081D32, #1DB27C);
                          border-radius: 2px;
                          border: 1px solid #439B2B;
                          color: #fff;
                          width:80px;
                          height: 37px;
                          margin: 22px 0 0 -92px " @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <div class="right">
        <el-button type="primary" style="
                    background: linear-gradient(0deg, #8F6B24, #031F3B);
                    border-radius: 2px;
                    border: 1px solid #947A20;
                    color: #fff;
                    width:80px; 
                    height: 37px;  
                    margin: 12px 0 0 0px" @click="addOpen">新增</el-button>
        <el-button type="primary" :disabled="multiple" style="
                    background: linear-gradient(0deg, #722943, #05111D);
                    border-radius: 2px;
                    border: 1px solid #942028;
                    color: #fff;
                    width:80px;
                    height: 37px;
                    margin: 12px 0 0 5px" @click="deleteHandle">删除</el-button>
      </div>
      <el-table border :data="tableData" :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange"
        :cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :row-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :header-cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED', fontSize: '14px', }"
        style="color:#EDEDED; border-color:#1560AC;width:100%">
        <el-table-column type="selection" reserve-selection width="50" align="center">
        </el-table-column>
        <el-table-column label="状态" width="50" align="center" prop="robotStatus">
          <template slot-scope="scope">
            <!-- 在线 -->
            <div slot="reference" class="statusBtn1" v-if="scope.row.robotStatus == 1">
              在线
            </div>
            <!-- 离线 -->
            <div slot="reference" class="statusBtn2" v-else>
              离线
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="robotName" label="机器人名称" width="100" align="center">
        </el-table-column>
        <el-table-column prop="robotNo" label="机器人编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="webUrl" label="底盘地址IP1" align="center">
        </el-table-column>
        <el-table-column prop="apiUrl" label="底盘地址IP2" align="center">
        </el-table-column>
        <el-table-column prop="handIP" label="机械臂IP" align="center">
        </el-table-column>
        <el-table-column prop="backDealIP" label="后端处理IP" align="center">
        </el-table-column>
        <el-table-column prop="camIP" label="摄像头IP" align="center">
        </el-table-column>
        <el-table-column prop="creater_time" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.creater_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="190">
          <template slot-scope="scope">
            <el-button class="btn1" size="mini" @click="connectRobot(scope.row)">连接</el-button>
            <el-button class="btn5" size="mini" @click="disConnectRobot(scope.row)">断开</el-button>
            <el-button class="btn3" size="mini" @click="editOpen(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增or修改 -->
    <AddOrEdit :dialogTitle="title" :formData="formData" :appendDialogVisible="appendDialog" @updataList="RobostList"
      @cencelSend="cencel" />
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="RobostList" />
  </div>
</template>
<script>

import AddOrEdit from './component/addAndEdit.vue'
import { getRobotList, ConnectRobot, DisConnectRobot, dleteRobot } from '@/api/cyRobot/robot'
export default {
  // 父组件里注册子组件
  components: {
    AddOrEdit
  },
  name: 'robot',
  data() {
    return {
      //分页相关
      total: 0, //总条数
      //新增修改的表单数据
      formData: {},
      //新增删除弹窗
      title: "新增",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //新增按钮
      appendDialog: false,
      queryParams: {
        robotName: '',
        robotNo: '',
        pageNum: 1,
        pageSize: 4
      },
      //机器人列表数据
      tableData: [],
      timer: null,//定时器
    };
  },
  created() {
    this.RobostList()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.RobostList() //刷新列表
    }, 6000);//6秒
  },
  methods: {
    // 取消
    cencel() {
      this.appendDialog = false;
      this.multiple = false
      this.formData = {}//子组件触发父组件的cencel方法每次关闭之后将formData清空,方便每次修改是值在变子组件都能监听到值变化并进行相应操作
    },
    //打开新增页面
    addOpen() {
      this.title = '新增'
      this.appendDialog = true
      this.formData = {}
    },
    //打开修改页面
    editOpen(idnex, row) {
      this.title = '修改'
      this.appendDialog = true
      this.formData = row
    },
    //机器人断开连接
    disConnectRobot(row) {
      DisConnectRobot({ id: row.id }).then(response => {
        this.$message(response.msg)
      })
    },
    //连接机器人
    connectRobot(row) {
      ConnectRobot({ id: row.id }).then(response => {
        this.$message(response.msg)
      })
    },
    //机器人列表
    RobostList() {
      getRobotList(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },
    //搜索
    onSearch() {
      this.RobostList()
    },
    //重置
    reset() {
      this.queryParams.robotName = ''
      this.queryParams.robotNo = ''
      this.RobostList()  //机器人列表
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection.length != 0) {
        this.single = selection.length != 1
        this.multiple = false
        this.ids = selection.map(item => item.id)
      } else {
        this.multiple = true
      }
    },
    //删除
    deleteHandle() {
      const id = String(this.ids.splice(','));//每次删除之前先将ids数组转化为逗号拼接的字符串;
      this.$confirm(`是否删ID为${id}的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dleteRobot(id).then(response => {
          if (response) {
            this.RobostList();//删除成功刷新列表
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  },
  beforeDestroy() {
    //清除定时器
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
  },
}
</script>

<style lang='scss' scoped>
* {
  padding: 0;
  margin: 0;
}

.container {
  background: #123150;
  width: 100%;
  height: calc(100vh - 40px);

  .top {
    width: 100%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    background-color: #123150;
    border: 1px solid #1560AC;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-left: none;
    border-top: none;
  }

  .header {
    width: 98%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    ::v-deep .el-form-item__label {
      margin: 20px 0px 0 0px;
      font-size: 13px;
      color: #b6b7be;
    }

    .el-form {
      width: 85%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      ::v-deep .el-textarea__inner {
        border: 1px solid #354075;
        background-color: #0f1a43;
        margin: 30px 0 0 7px;
        height: 100px;
      }

      ::v-deep .el-input--medium .el-input__inner {
        color: #C1C1C1;
      }

      ::placeholder {
        font-size: 13px;
        color: #b6b7be;
      }

      ::v-deep .el-form-item__label {
        width: 99px !important;
      }
    }

    .el-input {
      width: 160px;
      height: 15px;
      margin: 20px 20px 0 10px;
    }

    ::v-deep .el-input__inner {
      border: 1px solid #1560AC;
      background-color: #123150;
    }
  }

  .right {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .table {
    width: 100%;
    //margin: 10px 0 0 0;
    padding-left: 5px;
    padding-right: 5px;

    //最底下的线条
    ::v-deep .el-table::before,
    .el-table--group::after,
    .el-table--border::after {
      background-color: #1560AC;
    }

    //多选框
    ::v-deep .el-checkbox__inner {
      background: #123150;
      border-radius: 1px;
      border: 1px solid #1560AC;
    }

    .el-table__fit {
      background-color: #1E1913;
    }

    ::v-deep .el-button--default {
      width: 40px;
      height: 20px;
    }

    ::v-deep .el-button--danger {
      width: 50px;
      height: 20px;
    }

    ::v-deep .el-button--primary {
      width: 40px;
      height: 20px;
    }

    .statusBtn1 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #49FF5A;
    }

    .statusBtn2 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #7E7E7E;
    }

    .btn1 {
      width: 45px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #123150, #1C97B1);
      border-radius: 2px;
      border: 1px solid #1560AC;
    }

    .btn2 {
      width: 45px;
      height: 25px;
      color: #828282;
      background: linear-gradient(0deg, #24201B, #444545);
      border-radius: 2px;
      border: 1px solid #4B4B4B;
    }

    .btn3 {
      width: 45px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #123150, #1C97B1);
      border-radius: 2px;
      border: 1px solid #1560AC;
    }

    .btn4 {
      width: 45px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #052439, #34A432);
      border-radius: 2px;
      border: 1px solid #185A22;
    }

    .btn5 {
      width: 45px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #4C0820, #0D1538);
      border-radius: 2px;
      border: 1px solid #942028;
    }

    ::v-deep .el-table__body-wrapper {
      background-color: #123150;
    }

  }

  .pageBtn {
    width: 99%;
    height: 60px;
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
</style>